<template>
  <div>
    <div class="content" v-for="(item, index1) in topics" :key="item.topic_id">
      <!-- 标题 -->
      <el-row>
        <a :href="'/topic/' + item.topic_id + ''">
          <h1>{{ item.topic_title }}</h1>
        </a>
      </el-row>

      <el-row>
        <!-- 图片 -->
        <el-col :span="8">
          <div class="head_img">
            <img :src="item.topic_pic" alt="" />
          </div>
        </el-col>
        <!-- 内容 -->
        <el-col :span="16">
          <div class="topic_content">
            <p v-html="item.topic_content"></p>
          </div>
        </el-col>
      </el-row>
      <!-- 图标 -->
      <el-row>
        <div class="ico_list">
          <span v-if="user_id">
            <el-link :underline="false" v-if="isAgree(item.topic_id)">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-check"
                @click="changeAgree(index1)"
                >已赞同 {{ item.topic_agreeNum }}</el-button
              >
            </el-link>

            <el-link :underline="false" v-else>
              <el-button
                type="primary"
                plain
                size="mini"
                icon="el-icon-check"
                @click="changeAgree(index1)"
                >赞同 {{ item.topic_agreeNum }}</el-button
              >
            </el-link>
          </span>

          <span v-else>
            <el-link :underline="false">
              <el-button type="primary" plain size="mini" icon="el-icon-check"
                >赞同 {{ item.topic_agreeNum }}</el-button
              >
            </el-link>
          </span>

          <el-link icon="el-icon-chat-line-round" :underline="false"
            >评论 <span> {{ item.topic_commentNum }}</span></el-link
          >
          <el-link
            @click="changeFavorite(index1)"
            :underline="false"
            v-if="isFavorite(item.topic_id)"
          >
            <i class="el-icon-star-on" style="color: orange"></i>
            <span>已收藏</span>
          </el-link>
          <el-link @click="changeFavorite(index1)" :underline="false" v-else>
            <i class="el-icon-star-on"></i>
            <span>收藏</span>
          </el-link>
          <el-link icon="el-icon-share" :underline="false">转发</el-link>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      user_id: null,
      topics: [],
      agree: [],
      favorite: []
    }
  },
  created () {
    this.getTopic()
  },
  methods: {
    // 获取话题
    async getTopic () {
      const { data: res } = await this.$http.post('/', { topic_category: 1 })
      if (JSON.parse(sessionStorage.getItem('user')) !== null) {
        this.user_id = JSON.parse(sessionStorage.getItem('user')).user_id
        const { data: agreeData } = await this.$http.get('/agree_topic?id=' + this.user_id)
        const { data: favoriteData } = await this.$http.get('/favorite_topic?id=' + this.user_id)
        this.agree = agreeData
        this.favorite = favoriteData
      }
      if (res.status !== 200) return this.$message.error('获取数据失败！')
      this.topics = res.topic_info
    },
    // 点赞的方法
    async changeAgree (index) {
      const agreeObj = {
        topic_id: this.topics[index].topic_id,
        topic_agreeNum: this.topics[index].topic_agreeNum,
        user_id: this.user_id
      }
      const { data: res } = await this.$http.put('/agree_topic', agreeObj)

      if (res.status === 200) {
        this.$message.success('点赞成功！')
      } else {
        this.$message('取消点赞成功！')
      }
      this.getTopic()
    },
    // 收藏的方法
    async changeFavorite (index) {
      const favoriteObj = {
        topic_id: this.topics[index].topic_id,
        user_id: this.user_id
      }
      const { data: res } = await this.$http.put('/favorite_topic', favoriteObj)

      if (res.status === 200) {
        this.$message.success('收藏成功！')
      } else {
        this.$message('取消收藏成功！')
      }
      this.getTopic()
    },
    isAgree (topicId) {
      for (let i = 0; i < this.agree.length; i++) {
        if (this.agree[i].topic_id === topicId) {
          return true
        }
      }
    },
    isFavorite (topicId) {
      for (let i = 0; i < this.favorite.length; i++) {
        if (this.favorite[i].topic_id === topicId) {
          return true
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.head_img {
  width: 200px;
  height: 105px;
  overflow: hidden;
}
img {
  width: 100%;
  height: 100%;
}

.topic_content {
  height: 105px;
  overflow: hidden;
}

.el-link {
  margin-top: 15px;
  margin-right: 20px;
}

.ico_list {
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

p {
  margin: 0;
  margin-left: 15px;
}

a {
  color: #303133;
}

/deep/ h3 {
  margin: 0;
}
</style>
